<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <style type="text/css">

    </style>
</head>

<body class="wrap">

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    // apiready = function() {
    //     //输出Log，Log将显示在APICloud Studio控制台
    //     console.log("Hello World! Hello APICloud!");
    //
    //     var header = $api.dom('header'); // 获取 header 标签元素
    //     var footer = $api.dom('footer'); // 获取 footer 标签元素
    //
    //     // 1.修复开启沉浸式效果带来的顶部Header与手机状态栏重合的问题，最新api.js方法已支持适配iPhoneX；
    //     // 2.默认已开启了沉浸式效果 config.xml中 <preference name="statusBarAppearance" value="true"/>
    //     // 3.沉浸式效果适配支持iOS7+，Android4.4+以上版本
    //     var headerH = $api.fixStatusBar(header);
    //     // 最新api.js为了适配iPhoneX增加的方法，修复底部Footer部分与iPhoneX的底部虚拟横条键重叠的问题；
    //     var footerH = $api.fixTabBar(footer);
    //
    //     api.openFrame({
    //         name: 'main',
    //         url: 'html/main.html',
    //         bounces: true,
    //         rect: { // 推荐使用Margin布局，用于适配屏幕的动态变化
    //             marginTop: headerH, // main页面距离win顶部的高度
    //             marginBottom: footerH, // main页面距离win底部的高度
    //             w: 'auto' // main页面的宽度 自适应屏幕宽度
    //         }
    //     });
    //
    //     // 获取当前年份时间，并加载显示到页面
    //     var year = $api.byId('year');
    //     year.innerHTML = new Date().getFullYear();
    // };
    var UIScrollPicture;   //轮播图模块对象
    var UIButton;          //按钮模块对象
    var vButtonId;         //按钮模块对象索引对象
    //程序启动入口
    apiready = function(){
        //引导页显示判断
        var isFirst = api.getPrefs({
            key: 'isFirst',
            sync: true,
        });
        // isFirst=false;
        if (!isFirst) {
            //启动引导页面
            fnStartGuidePage();
        
        } else {
            fnStartMainPage();
        
        }
    };

    function fnStartGuidePage() {
        //设置页面默认图片;
        var tData = [
            'widget://image/guide1.jpg',
            'widget://image/guide2.jpg',
            'widget://image/guide3.jpg',
        ];
        UIScrollPicture = api.require('UIScrollPicture');
        console.log(JSON.stringify(UIScrollPicture));
        UIScrollPicture.open({
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'          //此处用'auto'是为了适应某些机型页面底部虚拟键的显示／隐藏 切换
            },
            data: {
                paths: tData,
            },
            styles: {
                indicator: {
                    align: 'center',
                    color: 'rgba(255,255,255,0.4)',
                    activeColor: '#FFFFFF'
                }
            },
            contentMode: 'scaleToFill',
            auto: false,          //禁止自动滚动
            loop: false,          //禁止循环播放
        }, function(ret, err) {
            if (ret) {
                /*
                  //方法1  点击末页任意位置进入主页面
                  if('click' == ret.eventType){
                     if(ret.index==3){
                       //关闭页面，进入主页面
                       fnStartMainPage();
                     }
                  }
                */
                //方法2  点击末页按钮进入主页面（使用前，需在控制台添加UIButton模块）
                //设计思路：添加一个UIButton模块，在UIScrollPicture页面滑动到末页时显示UIButton模块，其余页面隐藏按钮模块，在按钮模块添加点事件点击模块进入主页面
                //添加末页点击进入主页面方法
                if ('show' == ret.eventType) {
                    UIScrollPicture.addEventListener({
                        name: 'scroll'
                    }, function(ret, err) {
                        if (ret.status) {
                            if (ret.index == (tData.length - 1)) {
                                //显示进入按钮
                                fnShowStartBtn();
                            } else {
                                //隐藏进入按钮
                                fnHideStartBtn();
                            }
                        }
                    });
                }
            }
        });
    }

    //启动程序主页面
    function fnStartMainPage() {
        if(UIScrollPicture){
            //缓存App启动信息
            api.setPrefs({
                key: 'isFirst',
                value: '1'
            });
            //关闭引导页模块
            UIScrollPicture.close();
            //关闭方法2使用按钮模块
            if(UIButton){
                UIButton.close({
                    id: vButtonId
                });
            }
        }
        //启动主页面
        api.openWin({
            name: 'main',
            url: 'html/main.html',
            bounces: false,
            vScrollBarEnabled: false,
            hScrollBarEnabled: false,
            slidBackEnabled: false,
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    
    }

    //显示进入APP按钮
    function fnShowStartBtn() {
        if (!vButtonId && vButtonId != 0) {
            //初始化按钮模块
            UIButton = api.require('UIButton');
            UIButton.open({
                rect: {
                    x: api.winWidth / 2 - 50,
                    y: api.winHeight - 60,
                    w: 100,
                    h: 30
                },
                corner: 5,
                bg: {
                    normal: 'rgba(255,255,255,50)',
                    highlight: 'rgba(255,255,255,90)',
                    active: 'rgba(255,255,255,90)'
                },
                title: {
                    size: 20,
                    normal: '立即开启',
                    highlightColor: '#000000',
                    activeColor: '#000adf',
                    normalColor: '#FFFFFF',
                    alignment: 'center'
                },
                fixed: true,
                move: false
            }, function(ret, err) {
                if ('show' == ret.eventType) {
                    vButtonId = ret.id;
                }
                if ('click' == ret.eventType) {
                    //关闭引导页，进入主页面
                    fnStartMainPage();
                }
            });
        } else {
            //模块已初始化过，直接显示
            UIButton.show({
                id: vButtonId
            });
        }
    }
    //隐藏进入按钮
    function fnHideStartBtn() {
        if (UIButton) {
            UIButton.hide({
                id: vButtonId
            });
        }
    }
</script>

</html>
